import "../../style/index.css"
import "./index.css"
import * as d3 from "d3"
import api from "../../api"
import router from "../../router"
export default {
    template:`
        <div class="loginPageBox wh-100 center">
            <div class="loginPage center">
                <div class="center">
                    用户名：<input type="text" class="username">
                </div>
                <div class="center">
                    密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" class="psd">
                </div>
                <div class="center">
                    <button class="btn">登录</button> 
                    <button class="reg">注册</button>
                </div>
                
            </div>   
        </div>
    `,
    isLogin(){
        const token = localStorage.getItem('token')
        if(token){
        router.push('/index')
        }
    },


    bindClickBtn(){
        d3.select(".loginPage .btn")
        .on("click",this.login);

        d3.select(".loginPage .psd")
        .on("keydown",(e) =>{
            if(e.code === 'Enter'){
                this.login();
            }
        })
    },

     login(){
        const username = d3.select(".loginPage .username").property("value");
        const password = d3.select(".loginPage .psd").property("value");
        api.admin.funLogin(username,password)
        .then((res) =>{
            if(res?.code == 200){
                alert("登录成功")
                router.push('/index')
                localStorage.setItem('token',res?.data?.token)
            }else{
                alert("登录失败")
            }
        })


    },
    mounted(){
        this.bindClickBtn();
        this.isLogin();
    }
}